<template>
  <div id="app">
    <MyTop :niubi='niubi' :titleArr='titleArr' @qiehuantwo='qiehuantwo' />
    <div class="masss">
      <MyLeft :shoppingArr='shoppingArr' :xiabiao='xiabiao' @qiehuan='qiehuan' />
      <MyRight :shoppingArr='shoppingArr' :xiabiao='xiabiao' />

    </div>
  </div>
</template>

<script>
import MyTop from './components/MyTop.vue'
import MyLeft from './components/MyLeft.vue'
import MyRight from './components/MyRight.vue'

export default {
  components: { MyTop, MyLeft, MyRight },
  data() {
    return {
      xiabiao: 0,
      niubi: 0,
      titleArr: ['点餐', '评价4.6', '商家'],
      shoppingArr: [
        {
          title: '三文鱼',
          list: [
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '挪威三文鱼刺身', p1: '趋于三文鱼中断，口感鲜嫩', p2: '月售40份 好评率 100%', price: 66 },
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '国产生蚝-刺身', p1: '不辍', p2: '月售95份好评率100%', price: 88 },
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '挪威纯鲜三文鱼~厚片', p1: '百分之百当天空运直.…', p2: '月售34份好评率100%', price: 88 },
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '北极甜虾', p1: '每份30只', p2: '月售27份好评率100%', price: 88 },
          ]
        },
        {
          title: '刺身',
          list: [
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '国产生蚝', p1: '趋于三文鱼中断，口感鲜嫩', p2: '月售40份 好评率 100%', price: 66 },
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '国产生蚝-刺身', p1: '不辍', p2: '月售95份好评率100%', price: 88 },
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '挪威纯鲜三文鱼~厚片', p1: '百分之百当天空运直.…', p2: '月售34份好评率100%', price: 88 },
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '北极甜虾', p1: '每份30只', p2: '月售27份好评率100%', price: 88 },
          ]
        },
        {
          title: '刺身',
          list: [
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '挪威三文鱼刺身', p1: '趋于三文鱼中断，口感鲜嫩', p2: '月售40份 好评率 100%', price: 66 },
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '国产生蚝-刺身', p1: '不辍', p2: '月售95份好评率100%', price: 88 },
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '挪威纯鲜三文鱼~厚片', p1: '百分之百当天空运直.…', p2: '月售34份好评率100%', price: 88 },
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '国产生蚝', p1: '每份30只', p2: '月售27份好评率100%', price: 88 },
          ]
        },
        {
          title: '滑稽',
          list: [
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '挪威三文鱼刺身', p1: '趋于三文鱼中断，口感鲜嫩', p2: '月售40份 好评率 100%', price: 66 },
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '国产生蚝-刺身', p1: '不辍', p2: '月售95份好评率100%', price: 88 },
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '国产生蚝~厚片', p1: '百分之百当天空运直.…', p2: '月售34份好评率100%', price: 88 },
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '北极甜虾', p1: '每份30只', p2: '月售27份好评率100%', price: 88 },
          ]
        },
        {
          title: '牛逼',
          list: [
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '挪威三文鱼刺身', p1: '趋于三文鱼中断，口感鲜嫩', p2: '月售40份 好评率 100%', price: 66 },
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '国产生蚝-刺身', p1: '不辍', p2: '月售95份好评率100%', price: 88 },
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '挪威纯鲜三文鱼~厚片', p1: '百分之百当天空运直.…', p2: '月售34份好评率100%', price: 88 },
            { pic: 'https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/faedab64034f78f0917125267f310a55b2191ce8.jpg', name: '北极甜虾', p1: '每份30只', p2: '月售27份好评率100%', price: 88 },
          ]
        },

      ]
    }
  },
  methods: {
    qiehuan(index) {
      this.xiabiao = index
    },
    qiehuantwo(index) {
      this.niubi = index
    }
  },

}

</script>

<style lang="scss" >
* {
  padding: 0;
  margin: 0;
}

.active {
  color: red;
  border-left: 2px solid pink;
}
.activetwo {
  color: aqua;
}
.masss {
  display: flex;
  // left 组件

  // right 组件
}
</style>
